<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p:dialog xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	modal="true" width="930" height="600" resizable="false" 
	widgetVar="dialogAddFuncionario" id="dialogFuncionario" closable="false"
	appendToBody="true">

	<link type="text/css" rel="stylesheet" href="../../resources/css/style.css" />
	
	<f:facet name="header">
		<h:outputText value="Cadastrar Funcionário" />
	</f:facet>
	
	<h:form id="formAddFuncionario" prependId="false">
		<h:panelGroup id="panelFuncionario">
		<p:messages id="messageFormFuncionario"/>

			<h:panelGrid columns="4" style="padding:5px;">
					<h:outputText value="Código" />
					<h:outputText value="Nome *" />
					<h:outputText value="Data de nascimento" />
					<h:outputText value="Sexo" />
					
					<p:inputText style="width:100px;" disabled="true" value="#{agendamentoBean.newFuncionario.id}"/>
					<p:inputText style="width:400px;" value="#{agendamentoBean.newFuncionario.nome}" required="true" requiredMessage="Informe o nome." maxlength="100"/>
					<p:inputMask mask="99/99/9999" style="width:120px;" value="#{agendamentoBean.newFuncionario.dataNascimento}">
						<f:convertDateTime pattern="dd/MM/yyyy" />
					</p:inputMask>
					<p:selectOneRadio id="optionsFunc" value="#{agendamentoBean.newFuncionario.sexo}">  
	            		<f:selectItem itemLabel="Masculino" itemValue="M" />  
	           			<f:selectItem itemLabel="Feminino" itemValue="F" />  
	        		</p:selectOneRadio> 
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;">
					<h:outputText value="Logradouro *" />
					<h:outputText value="Número *" />
					<h:outputText value="Complemento" />
					<h:outputText value="Bairro *" />
									
					<p:inputText style="width:350px;" value="#{agendamentoBean.newFuncionario.logradouro}" maxlength="40" required="true" requiredMessage="Informe o logradouro."/>
					<p:inputText style="width:80px;" value="#{agendamentoBean.newFuncionario.numero}" maxlength="10" required="true" requiredMessage="Informe o número."/>
					<p:inputText style="width:150px;" value="#{agendamentoBean.newFuncionario.complemento}" maxlength="20"/>
					<p:inputText style="width:200px;" value="#{agendamentoBean.newFuncionario.bairro}" maxlength="20" required="true" requiredMessage="Informe o bairro."/>
				</h:panelGrid>
				
				<h:panelGrid columns="5" style="padding:5px;">			
					<h:outputText value="CEP" />		
					<h:outputText value="Cidade *" />	
					<h:outputText value="Estado" />	
					<h:outputText value="País" />		
					<h:outputText value="" />
					
					<p:inputMask mask="99.999-999" style="width:150px;" value="#{agendamentoBean.newFuncionario.cep}"/>
					<p:autoComplete id="inputCidadeFunc" var="cidade" value="#{agendamentoBean.newFuncionario.cidade}" maxlength="30"
						itemLabel="#{cidade.cidade}" itemValue="#{cidade}" size="50" required="true" requiredMessage="Selecione a cidade."
						converter="cidadeConverter" completeMethod="#{agendamentoBean.getCidadeByQuery}">
						<p:ajax event="itemSelect" process="@this inputCidadeFunc" update="inputEstadoFunc inputPaisFunc inputDddTelFunc inputDddCelFunc" />
					</p:autoComplete>
					<p:inputText style="width:200px;" disabled="true" value="#{agendamentoBean.newFuncionario.cidade.estado.estado}" id="inputEstadoFunc"/>	
					<p:inputText style="width:150px;" disabled="true" value="#{agendamentoBean.newFuncionario.cidade.estado.pais.pais}" id="inputPaisFunc"/>				
					<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{agendamentoBean.openDialogListCidade}" immediate="true" title="Selecionar cidade"/>
				</h:panelGrid>
				
				<h:panelGrid columns="5" style="padding:5px;">			
					<h:outputText value="Telefone" />		
					<h:outputText value="" />	
					<h:outputText value="Celular" />	
					<h:outputText value="" />		
					<h:outputText value="E-mail" />
					
					<p:inputMask mask="9?9" style="width:50px;" value="#{agendamentoBean.newFuncionario.cidade.ddd}" id="inputDddTelFunc" maxlength="2" placeHolder=" "/>
					<p:inputMask mask="9999-9999"  style="width:150px;" value="#{agendamentoBean.newFuncionario.telefone}"/>
					<p:inputMask mask="9?9" style="width:50px;"  value="#{agendamentoBean.newFuncionario.cidade.ddd}" id="inputDddCelFunc" maxlength="2" placeHolder=" "/>	
					<p:inputMask mask="9999-9999" style="width:150px;" value="#{agendamentoBean.newFuncionario.celular}" maxlength="9"/>
					<p:inputText style="width:370px;" value="#{agendamentoBean.newFuncionario.email}" maxlength="50"/>				
				</h:panelGrid>
				
				<h:panelGrid columns="5" style="padding:5px;">			
					<h:outputText value="RG" />
					<h:outputText value="CPF" />	
					<h:outputText value="Carteira de trabalho" />
					<h:outputText value="Cargo *" />
					<h:inputHidden />
					
					<p:inputText style="width:150px;" value="#{agendamentoBean.newFuncionario.rg}" maxlength="20"/>
					<p:inputMask mask="999.999.999-99" style="width:150px;" value="#{agendamentoBean.newFuncionario.cpf}"/>
					<p:inputMask mask="999.99999.99-9" style="width:150px;" value="#{agendamentoBean.newFuncionario.carteiraTrabalho}"/>	
					
					<p:autoComplete id="inputCargo" var="cargo" value="#{agendamentoBean.newFuncionario.cargo}" maxlength="30"
						itemLabel="#{cargo.cargo}" itemValue="#{cargo}" size="50" required="true" requiredMessage="Selecione o cargo"
						converter="cargoConverter" completeMethod="#{agendamentoBean.getCargoByQuery}">
						<p:ajax event="itemSelect" process="@this inputCargo" />
					</p:autoComplete>
						
					<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{agendamentoBean.openDialogListCargo}" immediate="true" title="Selecionar cargo"/>			
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;">			
					<h:outputText value="Salário" />		
					<h:outputText value="Comissão" />
					<h:outputText value="Data de admissão *" />	
					<h:outputText value="Data de demissão" />
					
					<pe:inputNumber value="#{agendamentoBean.newFuncionario.salario}" style="width:150px;" decimalSeparator="," decimalPlaces="2"  thousandSeparator="." maxValue="100000"/>
					<pe:inputNumber value="#{agendamentoBean.newFuncionario.comissao}" style="width:150px;" decimalSeparator="," decimalPlaces="2"  thousandSeparator="." maxValue="100000"/>
					<p:inputMask mask="99/99/9999" style="width:120px;" value="#{agendamentoBean.newFuncionario.dataAdmissao}" required="true" requiredMessage="Informe a data de admissão.">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</p:inputMask>
					<p:inputMask mask="99/99/9999" style="width:120px;" value="#{agendamentoBean.newFuncionario.dataDemissao}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</p:inputMask>				
				</h:panelGrid>
			
			<h:panelGrid columns="1" style="padding:5px;">
				<h:outputText value="* Campos obrigatórios" />
			</h:panelGrid>
			
			<div style="width:100%; display: inline-block;">
				<p:commandButton icon="ui-icon-search" value="Adicionar serviço" actionListener="#{agendamentoBean.openDialogListServicoAddFuncionario}" 
					style="float:right;" immediate="true"/>
			</div>
			<div style="padding-top:10px;">
				<p:dataTable var="servico" 
					value="#{agendamentoBean.currentServicos}"
					paginator="true" rows="3" paginatorPosition="bottom"
					emptyMessage="Não há registros" id="tableServicos" 
					scrollable="true">  
					
					<p:column headerText="Código" style="width:150px;">  
				    	<h:outputText value="#{servico.id}" />  
					</p:column>  
			 
					<p:column headerText="Descrição">  
				    	<h:outputText value="#{servico.descricao}" />  
					</p:column> 	
					<p:column headerText="" width="50" style="text-align:center;">
						<p:commandButton icon="ui-icon-trash" immediate="true"
						style="width: 24px; height: 24px;" actionListener="#{agendamentoBean.removeServico(servico.id)}" title="Remover"/>
					</p:column>
			  	</p:dataTable>
			</div>
		
		<div id="popup-buttons" style="padding-bottom: 10px; padding-top: 10px; text-align: right;">
			<p:commandButton value="Salvar" style="height:28px;" actionListener="#{agendamentoBean.saveFuncionarioFromDialog}" process="@this panelFuncionario" update="panelFuncionario" icon="ui-icon-disk"/>
			<p:commandButton value="Cancelar" style="height:28px;" onclick="dialogAddFuncionario.hide()" immediate="true" icon="ui-icon-cancel"/>
		</div>
		</h:panelGroup>
	</h:form>
</p:dialog>